<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content title">{{data.title}}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item,index) in coursesList" :key="index">
        <KeDetail :data="item" :showDate="data.showDate"></KeDetail>
      </el-col>
    </el-row>
    <el-row :gutter="20" v-if="total">
      <el-col :span="24">
        <div class="paging">
          <el-pagination
            background
            layout="prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page.sync="page"
            :page-size="20"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import KeDetail from "./KeDetail";
export default {
  props: ["data"],
  components: { KeDetail },
  data() {
    return {
      coursesList: [],
      page: 1,
      total: null
    };
  },
  created() {
    this.precoursesList();
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.precoursesList();
      // console.log(`当前页: ${val}`);
    },
    precoursesList() {
      this.$axios
        .post(this.data.url, {
          pagesize: 20,
          page: this.page
        })
        .then(res => {
          if (res.code == 200) {
            this.coursesList = res.data;
            this.total = res.total;
          }
        });
    }
  }
};
</script> 
<style scoped lang='less'>
.title {
  margin: 34px auto 16px;
  font-size: 20px;
  text-align: center;
  color: #000033;
}

.paging {
  margin: 40px auto;
  text-align: center;
}
</style>
